<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .root {
            width: 320px;
            margin: 0 auto;
            background-color: rgb(114, 87, 87);
            position: relative;
        }
        
        .tow {
            position: absolute;
            /* background-color: rgba(0, 0, 0, 0.568); */
            top: 0;
            left: 0;
        }
        
        .tiao {
            position: absolute;
            top: 65px;
            left: 63px;
        }
        
        .tiao img {
            width: 180px;
            height: 16px;
        }
        
        .fenshu {
            /* background-color: rgb(218, 79, 79); */
            height: 50px;
            width: 50px;
            position: absolute;
            top: 0;
            font-size: 30px;
            color: white;
            left: 60px;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="tiao"><img src="./img/progress.png" alt=""></div>
        <div class="one"><img src="./img/game_bg.jpg" alt="">
            <div class="fenshu"></div>
        </div>
        <div class="tow"></div>
    </div>
</body>

</html>
<script>
    var shang;
    var fenshu1 = 10;
    var xia;
    var tow = document.querySelector(".tow");
    var shanglang;
    var fenshu = document.querySelector(".fenshu");
    var tiao = document.querySelector(".tiao");
    var positionArray = [{
        l: "98px",
        t: "115px"
    }, {
        l: "17px",
        t: "160px"
    }, {
        l: "15px",
        t: "220px"
    }, {
        l: "30px",
        t: "293px"
    }, {
        l: "122px",
        t: "273px"
    }, {
        l: "207px",
        t: "295px"
    }, {
        l: "200px",
        t: "211px"
    }, {
        l: "187px",
        t: "141px"
    }, {
        l: "100px",
        t: "185px"
    }];
    var towImg = document.querySelector(".tow img");
    // 随机数
    function suiji() {
        return Math.floor(Math.random() * positionArray.length);
    }
    console.log(positionArray.length);

    // 随机创建个狼
    function lang() {
        var tu = document.createElement('img');
        setInterval(function() {}, 1000)

        tu.type = suiji() > 2 ? "h" : "x";
        var a = 0;
        shang = setInterval(function() {
            tu.src = "./img/" + tu.type + a + ".png";
            if (a >= 4) {
                clearInterval(shang);
                xia = setInterval(function() {
                    tu.src = "./img/" + tu.type + a + ".png";
                    if (a == 0) {
                        clearInterval(xia);
                        tu.remove();
                    }
                    a--;
                }, 300)
            }
            a++;
        }, 300);
        tow.appendChild(tu);
        var suiji1 = suiji();
        tow.style.top = positionArray[suiji1].t;
        tow.style.left = positionArray[suiji1].l;
        //点击事件
        tu.onclick = function() {

            clearInterval(shang);
            var da = 6;
            var dian = setInterval(function() {
                clearInterval(shang);
                clearInterval(xia);
                tu.src = "./img/" + tu.type + da + ".png";
                da++;
                if (da == 10) {
                    tu.remove();
                    clearInterval(dian);
                }
            }, 400)
            if (this.type == "h") {

                fenshu.innerHTML += fenshu1;

            } else {
                fenshu.innerHTML -= fenshu1;
            }

        }
    }
    var as = 180;

    function shijianjian() {
        as = as - 10;
        tiao.style.width = as + "px";


    }
    //点击事件
    setInterval(function() {
        lang();
        shijianjian()


    }, 3500)
</script>